<template>
	<view class="changList">
		<scroll-view class="scrolly" scroll-y="true" :scroll-into-view="viewId">
			<view class="city-box">
				<view class="box">
					<view class="title">
						<icon class="iconfont icon-dingwei"></icon>
						当前城市
					</view>
					<view class="currentCity">
						{{currentCity}}
					</view>
				</view>
				<view class="box">
					<view class="title">
						热门城市
					</view>
					<view class="hotlist" >
						<view class="item" v-for="(ite,index) in list" :key="index">
							{{ite}}
						</view>
					</view>
				</view>
				<!-- 字母列表 -->
				<view class="box-list" v-for="(value,index) in city" :key="index">
					<view class="initial" :id="value.title">
						{{value.title}}
					</view>
					<view 
					class="city-name" 
					v-for="(item,ide) in value.lists" 
					:key="ide"
					@click="changeCity(item)"
					>
						{{item}}
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		props:['city','letter'],
		name:"changeList",
		data() {
			return {
				viewId:'',
				currentCity:'北京',
				list:['深圳','北京','上海','广州','重庆','西安','苏州','武汉','杭州','郑州','南京','郑州']
			};
		},
		methods:{
			changeCity(city){
				let that=this;
				uni.setStorage({
					key:'city',
					data:city,
					success: (res) => {
						console.log('success');
					}
				})
				uni.getStorage({
					key:'city',
					success(res){
						that.currentCity=res.data;
					}
				})
				uni.redirectTo({
					url:"/pages/city/city"
				})
			}
		},
		watch:{
			letter(){
				console.log(this.letter);
				this.viewId=this.letter;
			}
		}
	}
</script>

<style>
.changList{
	background-color: #000000;
	width:100%;
	height:100%;
}
.box{
	background-color: #222;
	margin-top: 10px;
	padding:0 5px 20px 5px;
}
.title{
	height: 40px;
	line-height: 40px;
	margin-left: 15px;
	color: #fff;
	font-size: 12px ;
}
.currentCity{
	color:#aaa;
	font-size: 15px;
	height: 30px;
	line-height: 30px;
	margin-left: 15px ;
}
.hotlist{
	width:100%;
	overflow: hidden;
}
.item{
	float: left;
	width:30%;
	height:28px;
	line-height: 28px;
	font-size: 12px;
	background-color: #333;
	margin-left: 2.5%;
	margin-bottom:10px;
	text-align: center;
	color:#aaa;
}
.box-list{
	padding:8px 5px;
}
.initial{
	height: 25px;
	line-height: 25px;
	background-color: #000000;
	padding-left: 10px;
	color: #666;
	font-size: 11px;
}
.city-name{
	height: 40px;
	line-height: 40px;
	background-color: #222;
	padding-left: 10px;
	color: #AAA;
	font-size: 14px;
	border-bottom: 1px solid #000;
}
.scrolly{
	height:100%;
}
</style>
